//声明 Vue Select 组件，声明之后就可以在页面元素中直接使用
Vue.component('v-select' , VueSelect.VueSelect );
//创建一个 Vue 实例来操作表单元素
let createQuestionApp = new Vue({
    //1.绑定页面元素  element
    el: '#createQuestionApp' ,

    //2.实例属性
    data:{
        title:'',               //问题标题
        tags: [],               //保存获取的数据库所有标签
        selectedTags: [],       //客户选中的标签
        teachers:["罗辑","章北海"],            //保存获取的数据库所有老师
        selectedTeachers:[],    //客户选中的老师
    } ,

    //3.实例方法
    methods:{
        //提交问题
        createQuestion:function (){
            //测试成功，表示页面表单提交事件可以调用此方法
            console.log("createQuestion() is running..")
            //1.获取富文本编辑器中的内容,create.html第251行,通过id获取元素对象
            // $() 就是 jQuery 选择器。拿到的是 jQuery对象，只能调用jQuery方法。
            // 怎么样获取js对象 ？ document.getEelementById,
            let content = $("#summernote").val();
            //测试成功，表示jQuery能够成功获取到富文本编辑器内容
            console.log( content );
            // JavaScript ES6 标准提供创建对象的格式
            /*
            let zs = {
                name:"张三",
                age:20,
                phone:"12343566" ,
                email:"zs@qq.com"
            }
            */

            //创建一个js对象，整理表单要提交的数据内容（标题，已选标签，已选老师，问题内容）
            let data = {
                // 把vue对象的title数据赋值给 data对象的title变量。
                // this.指当前 vue对象
                title: this.title,
                tagNames:this.selectedTags,
                teacherNickNames:this.selectedTeachers,
                content:content
            }
            //测试有没有封装成功，测试成功就代表信写完了，该发送了。
            console.log(data);
            //发送请求的固定方法。 $.ajax() .
            $.ajax({
                url:"/questions",   //对应到 QuestionController PostMapping("/questions")
                method:"POST",      //服务器上没有这个数据，浏览发给服务器上添加
                data: data ,        //携带上面的 data 对象
                traditional: true , //改成传统的数组编码方式，才能让springMVC识别处理
                //----------------------------------------------------------------------
                success:function ( r ){
                    if(r.code == 200){
                        console.log( r.message )
                    }else{
                        console.log( r.message );
                    }
                }
                /*
                    hobby
                    <input type="checkbox" name="hobby" />Java
                    <input type="checkbox" name="hobby" />SpringMVC
                    <input type="checkbox" name="hobby" />MyBatis

                    传统的HTML数组编码方式：
                    hobby=java&hobby=springMVC&hobby=mybatis
                    jQuery默认的数组编码方式
                    hobby[]=java&hobby[]=spring&hobby[]=mybatis
                 */

            });





        },


        //加载老师下拉列表, 这个方法谁来调用 ？
        loadTeachers:function (){
            //向服务器发送请求,获取服务器中老师列表
            $.ajax( {
                url:'/users/teachers',
                method: 'GET',
                success:function ( r ){    //controller  Result.ok( List<Teachers> )
                    if(r.code == 200) {
                        let list = r.data;       //list是老师所有信息的列表
                        let teachers = []; //只保存老师的姓名
                        for (let i = 0; i < list.length; i++) {
                            teachers.push( list[i].nickName );
                        }
                        createQuestionApp.teachers = teachers;
                    }
                }
            } );
        },

        loadTags:function (){
            console.log("loadTags is running..")
            $.ajax({
                url:"/tags",
                method: 'GET' ,
                success:function ( result ){
                    console.log(" success is running ..")
                    if( result.code == 200 ){
                        console.log( "result == 200 ")
                        let list = result.data ;
                        console.log( list )
                        // 只保留所有标签的名字
                        let tags = [] ;
                        for( let i =0;i<list.length;i++){
                            tags.push( list[i].name )
                        }
                        createQuestionApp.tags = tags ;
                    }
                }
            });
        },
    },

    //4.钩子函数；加载 create.html 页面时执行 laodTags 方法。
    // 钩子函数不是我们写的，是Vue框架自带的（提供的），（找Vue笔记里）
    // 方法的执行，需要有使用者（人，事件，钩子函数，其它函数）去调用一下。
    created:function(){
        this.loadTags();
        this.loadTeachers();
    }
});